<template>
    <el-dialog v-model="editMenuVisible" title="编辑菜单" @close="handleClose" draggable>
        <el-form ref="formRef" :model="editMenuForm" label-width="auto">
            <el-form-item label="菜单名称" prop="name">
                <el-input
                    v-model="editMenuForm.name"
                    placeholder="使用vue-i18n时,输入对应的key"
                    clearable
                />
            </el-form-item>
            <el-form-item label="上级菜单" prop="parentId">
                <el-tree-select
                    v-model="editMenuForm.parentId"
                    :data="treeData"
                    clearable
                    check-strictly
                />
            </el-form-item>
            <el-form-item label="显示顺序" prop="seqNo">
                <el-input v-model="editMenuForm.seqNo" clearable />
            </el-form-item>
            <el-form-item label="菜单类型" prop="menuType">
                <el-radio-group v-model="editMenuForm.menuType">
                    <el-radio-button label="按钮" value="B" />
                    <el-radio-button label="目录" value="D" />
                    <el-radio-button label="菜单" value="M" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="请求地址" prop="url">
                <el-input v-model="editMenuForm.url" clearable />
            </el-form-item>
            <el-form-item label="菜单权限值" prop="perms">
                <el-input
                    v-model="editMenuForm.perms"
                    placeholder="后台验证权限的关键字"
                    clearable
                />
            </el-form-item>
            <el-form-item label="菜单状态" prop="status">
                <el-radio-group v-model="editMenuForm.status">
                    <el-radio :value="1">启用</el-radio>
                    <el-radio :value="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="侧边栏隐藏" prop="hidden">
                <el-radio-group v-model="editMenuForm.hidden">
                    <el-radio :value="1">隐藏</el-radio>
                    <el-radio :value="0">显示</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="显示根菜单" prop="alwaysShow">
                <el-radio-group v-model="editMenuForm.alwaysShow">
                    <el-radio :value="1">显示</el-radio>
                    <el-radio :value="0">不显示</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="重定向地址" prop="redirect">
                <el-input
                    v-model="editMenuForm.redirect"
                    placeholder="当设置 noRedirect 的时候该路由在面包屑导航中不可被点击"
                    clearable
                />
            </el-form-item>
            <el-form-item label="外层组件" prop="component">
                <el-input
                    v-model="editMenuForm.component"
                    placeholder="嵌套路由外层路由"
                    clearable
                />
            </el-form-item>
            <el-form-item label="外部链接地址" prop="href">
                <el-input v-model="editMenuForm.href" clearable />
            </el-form-item>
            <el-form-item label="菜单图标" prop="icon">
                <el-input v-model="editMenuForm.icon" clearable />
                <div class="icon-preview" v-if="editMenuForm.icon">
                    <div class="icon-box">
                        <template v-if="editMenuForm.icon.includes(':')">
                            <inconify :icon="editMenuForm.icon" />
                        </template>
                        <template v-else>
                            <local-svg-icon :name="editMenuForm.icon" />
                        </template>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="不缓存菜单" prop="noCache">
                <el-radio-group v-model="editMenuForm.noCache">
                    <el-radio :value="1">缓存</el-radio>
                    <el-radio :value="0">不缓存</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="附加标签导航" prop="affix">
                <el-radio-group v-model="editMenuForm.affix">
                    <el-radio :value="1">附加</el-radio>
                    <el-radio :value="0">不附加</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="面包屑显示" prop="breadcrumb">
                <el-radio-group v-model="editMenuForm.breadcrumb">
                    <el-radio :value="1">显示</el-radio>
                    <el-radio :value="0">不显示</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="默认激活地址" prop="activeMenu">
                <el-input
                    v-model="editMenuForm.activeMenu"
                    placeholder="页面加载时默认激活菜单的index"
                    clearable
                />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="editMenuForm.remark" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submitForm">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, inject } from 'vue'
import { Icon as inconify } from '@iconify/vue'
import LocalSvgIcon from '@/components/LocalSvgIcon/index.vue'
import { editMenu, getMenuTree } from '@/api/system/menu'
import { handleChildreNode, handleAttributes, handleTranslate } from '@/utils/common'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const formRef = ref(null)

const treeData = ref([])
const { editMenuVisible, selectedRow } = inject('editMenu')

const editMenuForm = reactive({
    id: undefined,
    name: undefined,
    parentId: undefined,
    seqNo: undefined,
    menuType: undefined,
    url: undefined,
    perms: undefined,
    status: undefined,
    hidden: undefined,
    alwaysShow: undefined,
    redirect: undefined,
    component: undefined,
    href: undefined,
    icon: undefined,
    noCache: undefined,
    affix: undefined,
    breadcrumb: undefined,
    activeMenu: undefined,
    remark: undefined
})

watch(
    () => selectedRow.value,
    (newValue) => {
        if (newValue) {
            Object.assign(editMenuForm, newValue)
            selectMenuTree()
        }
    },
    {
        // 立即以当前路由的值为触发条件
        immediate: true
    }
)
/**
 * 获取菜单树
 */
function selectMenuTree() {
    getMenuTree().then((response) => {
        if (response) {
            handleChildreNode(response.data)
            handleAttributes(response.data)
            handleTranslate(response.data)
            treeData.value = response.data
        }
    })
}
/**
 * 重置表单
 * @param formEl 表单的ref
 */
function resetForm(formEl) {
    if (!formEl) return
}
/**
 * 提交表单
 */
function submitForm() {
    editMenuVisible.value = false
    editMenu(editMenuForm)
    resetForm(formRef)
    // 刷新表格
    const { query, path } = route
    router.replace({ path: '/redirect' + path, query: query })
}
// 重置 editMenuForm 的函数
const resetEditMenuForm = () => {
    Object.keys(editMenuForm).forEach((key) => {
        editMenuForm[key] = undefined
    })
}
// 处理对话框关闭事件
function handleClose() {
    resetForm(formRef)
    resetEditMenuForm()
    editMenuVisible.value = false
}
</script>
<style lang="scss" scoped>
.icon-preview {
    margin-top: 30px;
    width: 800px;
    @include border();
    @include flex-center;
    & .icon-box {
        width: 100%;
        height: 100%;
        @include grid-center;
    }
}
</style>
